<template>
	<!-- <image src="/static/bg.png" alt="" class="bg" /> -->
	<van-empty description="暂无相关" v-if="list.length == 0" />
	<scroll-view scroll-y="true" @scrolltolower="lowerBottom" v-else>
		<!-- 选择列表重置区域 -->
		<!-- <van-dropdown-menu>
			<van-dropdown-item :title="switchTime1" v-model="value1" :options="option1" @change="switchTime" />
			<button class="cu-btn bg-white lg">重置</button>
		</van-dropdown-menu> -->
		<!-- 展示帖子区域 -->



		<div class="mesList" v-for="(item, index) in list" :key="item.userid">
			<div class="mes-card" @click="showdetail(item.mesid)">
				<div class="card-top">
					<div style="display: flex; flex-direction: row; align-items: center;">
						<div style="font-size: 23px;" class="title">{{ item.title }}</div>
						<div class="tags">
							<!-- <van-tag style="color: white; margin-left: 5px;" color="#ff00d3" round
									type="primary">#标签</van-tag> -->
							<view style="margin-left: 10px;" class="cu-tag round bg-orange light ">{{ item.types }}
							</view>
						</div>
					</div>



				</div>
				<div class="card-body">
					<!-- <img style="width: 100%;height:100px ;"
							src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg" /> -->
					<!-- <div class="card-text">有时候一个人上网也是挺无助的</div> -->
					<van-image v-if="item.imgList[0]" width="40rem" height="10rem" fit="cover" position="center"
						:src='item.imgList[0]' />
					<view class="content">
						{{ item.content }}
					</view>
				</div>

				<div class="card-bottom">
					<div style="display: flex; align-items: center; padding-right: 10px;" class="user-info">
						<van-image round width="2rem" height="2rem" :src='item.img' />
						<span style="margin-left: 5px;">{{ item.Username }}</span>
					</div>
					<view style="color: #9a9a9a;" class="time">
						{{ item.time.substring(0, 10) }}
					</view>
				</div>
			</div>
		</div>


	</scroll-view>
</template>

<script>
import { showAllpost } from '@/store/api.js'
import {
	truncateString
} from '@/store/constants.js'
export default {
	data() {
		return {
			total: 0,
			page: 1,
			// switchTime1: '请选择时间',
			// value1: -1,
			head: '',
			list: [],
			id: 0,
			// 	option1: [
			// 	{
			// 		text: '00:00-04:00',
			// 		value: 0
			// 	},
			// 	{
			// 		text: '04:00-08:00',
			// 		value: 1
			// 	},
			// 	{
			// 		text: '08:00-12:00',
			// 		value: 2
			// 	},
			// 	{
			// 		text: '12:00-16:00',
			// 		value: 3
			// 	},
			// 	{
			// 		text: '16:00-20:00',
			// 		value: 4
			// 	},
			// 	{
			// 		text: '20:00-24:00',
			// 		value: 5
			// 	},
			// ],
			// 查询的起始时间
			// begintimeQ:'',
			// 查询的结束时间
			// endtimeQ:''
		};
	},
	mounted() {
		//获取页面的帖子
		let data = {
			pageNum: '1',
			pageSize: '20',
			tagId: this.id
		}
		showAllpost(data).then(res => {
			this.page++
			this.total = res.data.data.total
			console.log(res)
			res.data.data.rows.forEach(item => {
				let types = ''
				item.tags.forEach(it => {
					types = types + '#' + it.name
				})
				this.list.push({
					img: item.posterAvatar,
					title: item.title,
					content: truncateString(item.content),
					imgList: this.processString(item.content).images,
					userid: item.posterId,
					mesid: item.id,
					time: item.beginTime,
					types: types
				})

			})
			console.log(this.list)
		})

	},
	onLoad(value) {
		// 更换头部标题
		let item = JSON.parse(value.param)
		console.log(item)
		this.head = item.name
		this.id = item.id
		uni.setNavigationBarTitle({
			title: item.name
		});
	},
	methods: {
		processString(inputString) {
			const parts = inputString.split('**/img/**');

			// 获取文本部分和图片 URL 部分
			const textPart = parts[0];
			const imageUrls = parts[1] ? parts[1].split(',') : [];

			// 将图片 URL 部分存储为数组
			const imagesArray = imageUrls.map(url => url.trim());

			const part2 = textPart.trim().split('**/rank/**')

			let newtext = part2[0]
			// let rankpart=part2[1]?JSON.parse(part2[1]):''
			// 返回处理后的结果，图片部分作为数组返回
			return {
				// rank:rankpart,//评分部分
				text: newtext.trim(), // 去除文本部分两端的空格
				images: imagesArray // 图片 URL 部分作为数组返回
			};

		},
		lowerBottom() {
			let data = {
				pageNum: this.page,
				pageSize: '20',
				tagId: this.id
			}
			showAllpost(data).then(res => {
				this.page++
				console.log(res)
				res.data.data.rows.forEach(item => {
					this.list.push({
						img: item.posterAvatar,
						title: item.title,
						content: truncateString(item.content),
						userid: item.posterId,
						mesid: item.id,
						time: item.beginTime,
					})
				})
			})
		},
		showdetail(mesid) {
			uni.navigateTo({
				url: `/subpkg/mes_detail/mes_detail?id=${mesid}`
			})
		},
		// switchTime(i){
		// 	this.switchTime1 = this.option1[i.detail].text
		// 	this.begintimeQ = this.switchTime1.substring(0,5)
		// 	this.endtimeQ = this.switchTime1.substring(6,11)
		// 	let data = {
		// 		pageNum: '1',
		// 		pageSize: '100',
		// 		beginTime: '2024-03-07T'+this.begintimeQ+':00.000+00:00',
		// 		endTime: '2024-03-07T'+this.endtimeQ+':00.000+00:00',
		// 		tagId: this.id
		// 	}
		// 	showAllpost(data).then( (res) => {
		// 		console.log(res)
		// 		this.list = []
		// 		res.data.data.rows.forEach(item=>{
		// 			this.list.push({
		// 				img:item.posterAvatar,
		// 				title:item.title,
		// 				content: item.content,
		// 				userid:item.posterId,
		// 				mesid:item.id
		// 			})
		// 		})
		// 	})
		// }
	}
}
</script>

<style lang="less">
.card-top {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding-top: 10px;
	padding-bottom: 10px;
}

.mes-card {
	overflow: hidden;
	position: relative;
	text-align: left;
	border-radius: 0.5rem;
	background-color: #fff;
	width: 100%;
	box-shadow: 7px 7px 14px #d0d0d0,
		-7px -7px 14px #f0f0f0;
}

.card-bottom {
	padding: 10px;
	align-items: center;


	width: 100%;
	display: flex;
	justify-content: space-between;
}

.time {}

.mesList {
	width: 100vw;
	padding: 10px;
	padding-left: 5px;
	padding-right: 5px;
	display: flex;

	justify-content: center;
}


.showImg {
	margin-top: 2vh;
	max-width: 25vw;
	// height: 20vw;
	// max-height: auto;
	margin-right: 1vh;
	margin-bottom: 2vh;
}

.timeAndType {
	display: flex;
	font-size: 10px;
	justify-content: flex-end;
	align-items: center;
	margin-right: 2vw;
}

.time {
	margin-right: 4vw;
}

.meslist {
	position: relative;
	z-index: 1;
	// margin-block-start: 20rpx;
	padding: 18rpx;
}

/* 单个卡片 */
.mes {
	z-index: 5;
	display: flex;
	margin-top: 2rpx;
	// height: 20vh;
	border-radius: 10rpx;
	// align-items: center;
	padding-top: 2vh;
	box-shadow: 3px 3px 5px 3px #888888;
	background-color: #fefefe;
	margin-left: 5rpx;
	margin-right: 5rpx;
}

.headimg {
	width: 215rpx;
	height: 100rpx;
	border-radius: 75%;
	margin-left: 15rpx;
}

.content {
	width: 600rpx;
	font-size: 25rpx;
	-webkit-line-clamp: 2;
	margin-left: 15rpx;
}

.title {
	font-weight: 700;
	font-size: 30rpx;
	margin-left: 15rpx;
}

.bg {
	width: 100%;
	height: 74%;
	z-index: 0;
	position: absolute;
}
</style>